import { ref, onMounted } from "vue";
import { Viewer } from "@photo-sphere-viewer/core";
import "@photo-sphere-viewer/core/index.css";
// 自动旋转, 简介动画
import { AutorotatePlugin } from "@photo-sphere-viewer/autorotate-plugin";
// 标记
import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
import "@photo-sphere-viewer/markers-plugin/index.css";
// 罗盘
import { CompassPlugin } from "@photo-sphere-viewer/compass-plugin";
import "@photo-sphere-viewer/compass-plugin/index.css";
// 画廊 多张图片
import { GalleryPlugin } from "@photo-sphere-viewer/gallery-plugin";
import "@photo-sphere-viewer/gallery-plugin/index.css";
// 地图
// import { MapPlugin } from '@photo-sphere-viewer/map-plugin'
// import '@photo-sphere-viewer/map-plugin/index.css'

// GPS地理地图
import { PlanPlugin } from "@photo-sphere-viewer/plan-plugin";
import "@photo-sphere-viewer/plan-plugin/index.css";
import { TileLayer } from "leaflet";

// import icon from 'leaflet/dist/images/marker-icon.png' // 解决图标不正常显示bug
// L.Marker.prototype.options.icon = L.icon({
//     iconUrl: icon,
//     iconAnchor: [10, 41]
// })
// 更改分辨率 GalleryPlugin与ResolutionPlugin不兼容。
// import { ResolutionPlugin } from "@photo-sphere-viewer/resolution-plugin";

// 添加“设置”按钮
import { SettingsPlugin } from "@photo-sphere-viewer/settings-plugin";
import "@photo-sphere-viewer/settings-plugin/index.css";

// 添加一个新的“立体视图”按钮，仅在陀螺仪API可用时显示
// import { GyroscopePlugin } from "@photo-sphere-viewer/gyroscope-plugin";
// import { StereoPlugin } from "@photo-sphere-viewer/stereo-plugin";
// 矩形视频
// import { EquirectangularVideoAdapter } from '@photo-sphere-viewer/equirectangular-video-adapter'
// import { VideoPlugin } from '@photo-sphere-viewer/video-plugin'
// import '@photo-sphere-viewer/video-plugin/index.css'

// 虚拟游览
import { VirtualTourPlugin } from "@photo-sphere-viewer/virtual-tour-plugin";
// import "@photo-sphere-viewer/virtual-tour-plugin/index.css";
// 陀螺仪
// import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin'

export function useGoodsExamine() {
  const baseUrl = "https://photo-sphere-viewer-data.netlify.app/assets/";
  const caption = "我是小分支";
  const markerLighthouse = {
    id: "marker-1",
    image: baseUrl + "pictos/pin-red.png",
    tooltip: "Cape Florida Light, Key Biscayne",
    size: { width: 32, height: 32 },
    anchor: "bottom center",
    gps: [-80.155973, 25.666601, 29 + 3],
  };
  // --------------------虚拟浏览---------------------
  const viewerRef = ref();
  const nodes = [
    {
      id: "1",
      panorama: baseUrl + "sphere.jpg",//通往全景的路径
      thumbnail: baseUrl + 'sphere.jpg',
      name: "One",
      caption: `[1] ${caption}`,
      links: [{ nodeId: "2" }],
      markers: [markerLighthouse],
      gps: [-80.156479, 25.666725, 3],
      sphereCorrection: { pan: "33deg" },
    },
    {
      id: "2",
      panorama: baseUrl + "tour/key-biscayne-2.jpg",//通往全景的路径
      thumbnail: baseUrl + "tour/key-biscayne-2-thumb.jpg",
      name: "Two",
      caption: `[21] ${caption}`,
      // { nodeId: '3' },
      links: [{ nodeId: "1" }],//目标节点
      markers: [markerLighthouse],
      gps: [-80.156168, 25.666623, 3],
      sphereCorrection: { pan: "42deg" },
    },
  ];
  // 设置全景图
  const setPhotoView = () => {
    const viewer = new Viewer({
      container: viewerRef.value, //必填参数，放置全景图的div元素
      defaultYaw: "130deg",
      panorama: baseUrl + "sphere.jpg",
      caption: "这是导航栏的标题",
      loadingImg: baseUrl + "loader.gif",
      touchmoveTwoFingers: true,
      mousewheelCtrlKey: true,
      fisheye: true, //鱼眼
      mousemove: true,
      // adapter: [
      //     EquirectangularVideoAdapter,
      //     {
      //         muted: true
      //     }
      // ],
      // panorama: {
      //     source: baseUrl + 'path/video.mp4'
      // },
      // navbar: [
      //     'zoom',
      //     {
      //         // a custom button to change keypoints
      //         title: 'XXXXXXXXXXXXXXXXX',
      //         className: 'custom-options-setting',
      //         content: '🔄123',
      //         onClick: randomPoints
      //     },
      //     'caption',
      //     'fullscreen'
      // ],
      plugins: [
        [
          VirtualTourPlugin,
          {
            positionMode: "gps",
            renderMode: "3d",
            nodes: nodes,
            startNodeId: "1",
          },
        ],
        // VideoPlugin,
        // GyroscopePlugin,
        // StereoPlugin,
        SettingsPlugin,
        // [
        //   ResolutionPlugin,
        //   {
        //     defaultResolution: "SD",
        //     resolutions: [
        //       {
        //         id: "SD",
        //         label: "Small",
        //         panorama: baseUrl + "sphere_small.jpg",
        //       },
        //       {
        //         id: "HD",
        //         label: "Normal",
        //         panorama: baseUrl + "sphere.jpg",
        //       },
        //     ],
        //   },
        // ],
        // [
        //   PlanPlugin,
        //   {
        //     defaultZoom: 14,
        //     coordinates: [6.78677, 44.58241],
        //     bearing: "120deg",
        //     layers: [
        //       // {
        //       //     name: 'OpenStreetMap',
        //       //     urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        //       //     attribution: '&copy; OpenStreetMap'
        //       // },
        //       {
        //         name: "OpenTopoMap",
        //         layer: new TileLayer(
        //           "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
        //           {
        //             subdomains: ["a", "b", "c"],
        //             maxZoom: 17,
        //           }
        //         ),
        //         attribution: "&copy; OpenTopoMap",
        //       },
        //     ],
        //     hotspots: [
        //       {
        //         coordinates: [6.7783, 44.58506],
        //         id: "green-lake",
        //         tooltip: "Lac vert",
        //         color: "green",
        //       },
        //     ],
        //   },
        // ],
        // [
        //     MapPlugin,
        //     {
        //         imageUrl: baseUrl + 'map.jpg',
        //         center: { x: 807, y: 607 },
        //         rotation: '135deg',
        //         defaultZoom: 40,
        //         hotspots: [
        //             {
        //                 x: 450,
        //                 y: 450,
        //                 id: 'green-lake',
        //                 color: 'green',
        //                 tooltip: 'Lac vert'
        //             },
        //             {
        //                 yaw: '-45deg',
        //                 distance: 80 // pixels
        //             }
        //         ]
        //     }
        // ],
        [
          GalleryPlugin,
          {
            visibleOnLoad: true,
            hideOnClick: false,
          },
        ],
        [
          CompassPlugin,
          {
            hotspots: [
              { yaw: "45deg" },
              { yaw: "60deg", color: "red" },
              { yaw: "90deg" },
              { yaw: "180deg" },
              { yaw: "270deg" },
            ],
          },
        ],
        // [
        //   //  转得要吐了
        //   AutorotatePlugin,
        //   {
        //     autostartDelay: 1000,
        //     autorotateSpeed: "3rpm",
        //   },
        // ],
        MarkersPlugin,
      ],
    });
    // 【getPlugin】：方法获得插件实例，允许调用插件上的方法并订阅事件。

    // --------------------设置 按钮---------------------
    const settings = viewer.getPlugin(SettingsPlugin);

    let currentToggle = true;
    let currentOption = "A";

    settings.addSetting({
      id: "custom-toggle-setting",
      label: "Toggle setting",
      type: "toggle",
      active: () => currentToggle,
      toggle: () => (currentToggle = !currentToggle),
    });

    settings.addSetting({
      id: "custom-options-setting",
      label: "Options setting",
      type: "options",
      current: () => currentOption,
      options: () => [
        { id: "A", label: "Option A" },
        { id: "B", label: "Option B" },
      ],
      apply: (option) => (currentOption = option),
      badge: () => currentOption,
    });
    // --------------------多张图---------------------
    const gallery = viewer.getPlugin(GalleryPlugin);
    gallery.setItems([
      {
        id: "pano-1",
        name: "第一张全景",
        panorama: baseUrl + "sphere.jpg",
        thumbnail: baseUrl + "sphere-small.jpg",
        options: {
          caption: "第一",
        },
      },
      {
        id: "pano-2",
        name: "第二张全景",
        panorama: baseUrl + "tour/key-biscayne-1.jpg",
        thumbnail: baseUrl + "tour/key-biscayne-1-thumb.jpg",
        options: {
          caption: "第二",
        },
      },
    ]);

    // --------------------标记---------------------
    // viewer.addEventListener('ready', randomPoints, { once: true })
    // const autorotatePlugin = viewer.getPlugin(AutorotatePlugin)
    // const markersPlugin = viewer.getPlugin(MarkersPlugin)
    // function randomPoints() {
    //     // const points = []
    //     for (let i = 0, l = Math.random() * 2 + 4; i < l; i++) {
    // 		//  points.push({})
    //         // points.push({
    //         //     position: {
    //         //         yaw: ((i + Math.random()) * 2 * Math.PI) / l,
    //         //         pitch: (Math.random() * Math.PI) / 3 - Math.PI / 6
    //         //     },
    //         //     pause: i % 3 === 0 ? 2000 : 0,
    //         //     tooltip: '这是标记'
    //         // })
    //     }
    //     markersPlugin.setMarkers(
    //         points.map((pt, i) => {
    //             return {
    //                 id: '#' + i,
    //                 position: pt.position,
    //                 image: baseUrl + 'pictos/pin-red.png',
    //                 size: { width: 32, height: 32 },
    //                 anchor: 'bottom center'
    //             }
    //         })
    //     )
    //     autorotatePlugin.setKeypoints(points)
    // }
  };

  return {
    setPhotoView,
    viewerRef,
  };
}
